{{define "coverage.html"}}

<!DOCTYPE html>
<html>
<head>
    <title>代码覆盖率浏览器</title>
    <style>
        .container {
            display: flex;
            height: 100vh;
        }

        /* 左侧目录树样式 */
        .sidebar {
            width: 300px;
            background: #2d2d2d;
            color: #ccc;
            overflow-y: auto;
            padding: 10px;
        }

        .tree-node {
            cursor: pointer;
            padding: 5px 10px;
            user-select: none;
            transition: all 0.2s;
        }

        .tree-node:hover {
            background: #3d3d3d;
        }

        .tree-children {
            margin-left: 20px;
            display: none;
        }

        .tree-node.expanded > .tree-children {
            display: block;
        }

        .icon {
            display: inline-block;
            width: 20px;
            text-align: center;
        }

        /* 右侧覆盖率报告样式 */
        #coverageFrame {
            flex: 1;
            border: none;
            background: black;
        }

        .loading {
            color: #666;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 左侧目录树 -->
        <div class="sidebar" id="directoryTree">
            <div class="loading">加载目录中...</div>
        </div>
        
        <!-- 右侧覆盖率报告 -->
        <iframe id="coverageFrame" class="content"></iframe>
    </div>

    <script>
        // 初始化加载目录结构
        document.addEventListener('DOMContentLoaded', init);

        async function init() {
            try {
                const response = await fetch('/gitrepo/tree');
                const treeData = await response.json();
                renderDirectoryTree(treeData);
            } catch (err) {
                showError('目录加载失败');
            }
        }

        function renderDirectoryTree(data) {
            const container = document.getElementById('directoryTree');
            container.innerHTML = ''; // 清空加载提示
            buildTree(container, data);
        }

        function buildTree(container, nodes, level = 0) {
            const ul = document.createElement('div');
            ul.className = 'tree-children';

            nodes.forEach(node => {
                const nodeElement = document.createElement('div');
                nodeElement.className = 'tree-node';
                nodeElement.innerHTML = `
                    <span class="icon">${node.type === 'directory' ? '📁' : '📄'}</span>
                    ${node.name}
                `;

                // 处理目录节点
                if (node.type === 'directory') {
                    nodeElement.addEventListener('click', (e) => {
                        e.stopPropagation();
                        nodeElement.classList.toggle('expanded');
                        
                        // 延迟加载子节点
                        if (node.children && !ul.hasChildNodes()) {
                            buildTree(ul, node.children, level + 1);
                            ul.style.display = 'none';
                        }
                        
                        ul.style.display = ul.style.display === 'none' ? 'block' : 'none';
                    });
                }

                // 处理文件点击
                if (node.type === 'file') {
                    nodeElement.addEventListener('click', () => {
                        // 高亮选中项
                        document.querySelectorAll('.tree-node').forEach(n => n.style.background = '');
                        nodeElement.style.background = '#4d4d4d';
                        
                        // 加载覆盖率报告
                        loadCoverageReport(node.path.replace('.go', '.html'));
                    });
                }

                // 递归处理子节点
                if (node.children?.length) {
                    buildTree(ul, node.children, level + 1);
                    nodeElement.appendChild(ul);
                }

                container.appendChild(nodeElement);
            });
        }

        async function loadCoverageReport(reportPath) {
            const frame = document.getElementById('coverageFrame');
            frame.src = `/gitrepo/coverage?path=${encodeURIComponent(reportPath)}`;
            
            // 显示加载状态
            frame.onload = () => frame.style.visibility = 'visible';
            frame.style.visibility = 'hidden';
        }

        function showError(msg) {
            const errorDiv = document.createElement('div');
            errorDiv.className = 'error';
            errorDiv.style.color = '#ff4444';
            errorDiv.textContent = msg;
            document.body.prepend(errorDiv);
        }
    </script>
</body>
</html>

{{end}}